<!--
 * @Description: 添加,编辑标签弹窗组件
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-12-07 17:11:55
 * @LastEditors: 付小清
 * @LastEditTime: 2020-12-16 10:34:46
-->

<template>
  <el-dialog
    width="570px"
    :title="_formData.genre == 'add' ? '添加业务标签' : '编辑业务标签'"
    :visible.sync="_isShow"
    :close-on-click-modal="false"
    @close="closeModal"
  >
    <el-form
      ref="refForm"
      style="padding-right: 40px"
      :model="_formData"
      label-width="120px"
      :validate-on-rule-change="false"
    >
      <el-form-item prop="tagName" :rules="formVerify.tagName" label="标签名称：">
        <el-input v-model="_formData.tagName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="标签分类：">
        <!-- <el-cascader
          v-if="_isShow"
          v-model="formData.parentTag"
          style="width: 100%"
          clearable
          :props="options"
          :disabled="_formData.genre == 'edit' ? true : false"
          node-key="tagName"
          @change="handleChange"
        /> -->
        <el-select v-model="_formData.parentTag" placeholder="请选择" :disabled="_formData.genre == 'edit' ? true : false" style="width: 100%">
          <el-option
            v-for="item in tagTypeList"
            :key="item.tagId"
            :label="item.tagName"
            :value="item.tagId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="_formData.tagOrder" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      <el-button @click="_isShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 接口
import { tagUpdateEdit, tagTree } from '@/api/basics'
export default {
  props: {
    // 弹窗显示
    show: {
      type: Boolean,
      default: false
    },
    // 表单数据
    formData: {
      type: Object,
      default: () => {
        return {
          genre: 'add', // add或者edit
          parentTag: '',
          tagId: '',
          tagName: '',
          tagLevel: '',
          tagOrder: 0
        }
      }
    }
  },
  data() {
    return {
      formVerify: {
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },
      tagTypeList: []
      // options: {
      //   lazy: true,
      //   checkStrictly: true,
      //   async lazyLoad(node, resolve) {
      //     let code = ''
      //     if (node.level === 0) {
      //       code = '0'
      //     } else {
      //       // 其余节点处理
      //       code = node.data.value
      //     }
      //     try {
      //       const { data } = await tagTree({ sup: code })
      //       const list = []
      //       data.filter((item) => {
      //         // 最后不显示展开节点
      //         // if (item.tagId.length > 6) {
      //         //   list.push({
      //         //     value: item.tagId,
      //         //     label: item.tagName,
      //         //     leaf: true
      //         //   })
      //         // } else {
      //         //   list.push({
      //         //     value: item.tagId,
      //         //     label: item.tagName
      //         //   })
      //         // }
      //         list.push({
      //           value: item.tagId,
      //           label: item.tagName
      //         })
      //       })
      //       resolve(list)
      //     } catch (e) {
      //       console.log(e)
      //     }
      //   }
      // }
    }
  },
  computed: {
    _isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    },
    _formData: {
      get() {
        return this.formData
      },
      set(val) {
        this.$emit('update:formData', val)
      }
    }
  },
  mounted() {
    this.getTagTypeList()
  },
  methods: {
    async getTagTypeList() {
      const { data } = await tagTree({ sup: '0' })
      this.tagTypeList = data
    },
    handleChange(data) {
      this._formData.parentTag = data
    },
    closeModal() {
      this.$refs.refForm.resetFields()
      this.sendTimeType = '1'
    },
    onSubmit() {
      try {
        // 验证表单是否填写完善
        this.$refs.refForm.validate(async(valid) => {
          if (valid) {
            const formData = this._formData
            // if (
            //   typeof this._formData.parentTag === 'object' &&
            //   this._formData.parentTag.length
            // ) {
            //   formData.tagLevel = this._formData.parentTag.length
            //   formData.parentTag =
            //     formData.parentTag[formData.parentTag.length - 1]
            // } else {
            //   formData.tagLevel = 1
            //   formData.parentTag = '0'
            // }
            if (formData.parentTag) {
              formData.tagLevel = 2
            } else {
              formData.parentTag = '0'
              formData.tagLevel = 1
            }
            // 提交请求
            const { data, code } = await tagUpdateEdit(formData)
            // 成功处理
            if (code === 0 && data === true) {
              if (this._formData.genre === 'add') {
                this.$message({ message: '添加标签成功', type: 'success' })
              } else {
                this.$message({ message: '修改标签成功', type: 'success' })
              }
              this._isShow = false // 关闭弹窗
              this.getTagTypeList()
              this.$emit('refresh') // 刷新列表数据
            } else {
              this.$message({ message: data, type: 'error' })
            }
          } else {
            console.log('error submit!!')
          }
        })
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
